<template>
	<div class='modal-dialog' v-if="goodsInfo">
		<div class='modal-content'>
			<div class='modal-header header'>
				<span class='title'>编辑订单</span>
				<span class='modal-cancel-btn' @click='_hideDialog'>取消</span>
			</div>
			<div class='modal-body'>
				<!--商品概要  -->
				<div class='goods-intro-container'>
					<div class='goods-synopsis'>
						<span class='good-title'>{{goodsDetails.goods_name}}</span>
						<span class='sub-goods-title'>{{goodsDetails.delivery_description?goodsDetails.delivery_description: ""}}</span>
						<span class='goods-price'>￥{{goodsDetails.selectedPrice}}</span>
					</div>
					<div class='goods-thumb-container'>
						<img class='goods-thumb' :src='goodsDetails.goods_image' />
					</div>
				</div>
				<!--商品规格  -->
				<div class='goods-specification'>
					<!--选中的样式 goods-active  -->
					<span v-for="(item,index) in goodsDetails.spec" :class='index === goodsDetails.defaultSpecIndex ? "goods-active" : ""' :key="index" @click='_changeSpec($event,item,index)' :data-spec-index="index">{{item.sp_value_name}}</span>
				</div>
				<!--选择数量  -->
				<div class='select-quantity'>
					<img class='select-num-btn' src='../../../../static/img/minus.png' @click='_minusGoodsNum' />
					<span class='selected-num'>{{goodsInfo.num}}</span>
					<img class='select-num-btn' src='../../../../static/img/plus.png' @click='_addGoodsNum' />
				</div>
			</div>
			<div class='modal-footer'>
				<div class='add-cart' @click='_addCartHandle'>
					<span>加入购物车</span>
				</div>
				<div class='go-buy' @click='_goBuyGoods'>
					<span>￥{{parseInt(goodsDetails.totalPrice)}}定制</span>
				</div>
			</div>

		</div>
	</div>
</template>

<script>
	import { mapGetters, mapState, mapActions } from 'vuex';
	import { Toast } from 'mint-ui';
	import server from '@/server/api';
	export default {
		data() {
			return {
				goodsInfo: null,
				confirmOrderData: {},
				chooseBuyMethod: 0,
				goodsArr: [],
				params: {}
			}
		},
		computed: {
			...mapState(['goodsDetails'])
		},
		mounted() {
			if(this.goodsDetails) {
				// 设置订单的信息。默认为选中第一个小商品
				this.goodsInfo = {
					goods_id: this.goodsDetails.goods_id,
					goods_image: this.goodsDetails.goods_image,
					goods_name: this.goodsDetails.goods_name,
					goods_price: this.goodsDetails.goods_price,
					is_collocation: 1,
					num: 1,
					sp_value_id: this.goodsDetails.spec[0].sp_value_id,
					spec_name: this.goodsDetails.spec[0].sp_value_name
				}
				// 因为原本的对象中没有 selectedPrice defaultSpecIndex 相当于改变对象的长度，所以需要this.set
				// 例子：https://cn.vuejs.org/v2/guide/list.html#%E6%95%B0%E7%BB%84%E6%9B%B4%E6%96%B0%E6%A3%80%E6%B5%8B
				this.$set(this.goodsDetails, "selectedPrice", this.goodsDetails.spec[0].goods_price)
				this.$set(this.goodsDetails, "defaultSpecIndex", 0)
				this.$set(this.goodsDetails, "totalPrice", this.goodsDetails.spec[0].goods_price)
				
			}
		},
		created() {},
		methods: {
			...mapActions(['getShoppingList', 'getSelectGoods']),
			_hideDialog() {
				this.$emit("showModel", false)
			},
			_addGoodsNum() {
				if(this.goodsInfo) {
					this.goodsInfo.num++;
					this.$set(this.goodsDetails, "totalPrice", this.goodsInfo.num * this.goodsDetails.selectedPrice)
				}

			},
			_minusGoodsNum() {
				if(this.goodsInfo.num <= 1) {
					Toast("不能再减了！！！");
					return;
				}
				if(this.goodsInfo) {
					this.goodsInfo.num--;
					this.$set(this.goodsDetails, "totalPrice", this.goodsInfo.num * this.goodsDetails.selectedPrice)
				}
			},
			_changeSpec(event, item, index) {
				// 改变小商品信息
				this.$set(this.goodsDetails, "selectedPrice", this.goodsDetails.spec[index].goods_price)
				this.$set(this.goodsDetails, "defaultSpecIndex", index)
				this.$set(this.goodsDetails, "totalPrice", this.goodsInfo.num * this.goodsDetails.selectedPrice)
				this.goodsInfo.sp_value_id = this.goodsDetails.spec[index].sp_value_id;
				this.goodsInfo.spec_name = this.goodsDetails.spec[index].sp_value_name;
				this.goodsInfo.goods_price = this.goodsDetails.selectedPrice;
			},
			_goBuyGoods() {
				this.$set(this.confirmOrderData, "chooseBuyMethod", this.chooseBuyMethod);
				this.$set(this.confirmOrderData, "from", "goodsDetails");
				this.goodsArr[0] = this.goodsInfo;
				this.$set(this.confirmOrderData, "data", this.goodsArr);
				this.$set(this.confirmOrderData, "totalPrice", this.goodsInfo.num * this.goodsDetails.selectedPrice);


				// 请求订单数据
				this.$set(this.params, "collocation_list", JSON.stringify(this.goodsArr));
				this.$set(this.params, "ifcart", "collocation");
				this.$set(this.params, "member_id", 101076);
				this.$set(this.params, "order_label", 0);

				this.getSelectGoods(this.params);
				this.$router.push('/comfirmOrderDetail')
				this._hideDialog()
			},
			_addCartHandle() {
				// 加入购物车
				const _this = this;
				const goodsInfo = _this.goodsDetails;
				var specIndex = goodsInfo.defaultSpecIndex;
				let param = {};
				if(goodsInfo.goods_label == 0) {
					param = {
						member_id: 101076,
						collocation: "collocation",
						collocation_info: [{
							goods_id: goodsInfo.goods_id,
							num: _this.goodsInfo.num,
							sp_value_id: goodsInfo.spec[specIndex].sp_value_id,
							is_collocation: 1
						}]
					};
					for(var i = 0; i < goodsInfo.collocation.length; i++) {
						var collocation = goodsInfo.collocation[i];
						var collocationSpecIndex = collocation.defaultSpecIndex;
						if(collocation.count && collocation.count > 0) {
							param.collocation_info.push({
								goods_id: collocation.goods_id,
								num: collocation.count,
								sp_value_id: collocation.spec[collocationSpecIndex].sp_value_id,
								is_collocation: 2
							})
						}
					}
					param.collocation_info = JSON.stringify(param.collocation_info);
				} else {
					param = {
						member_id: app.globalData.userInfo.member_id,
						goods_id: goodsInfo.goods_id,
						sp_value_id: goodsInfo.spec[specIndex].sp_value_id,
						goods_num: _this.goodsInfo.num
					}
				}
				server.post("/index/cart/cart_add", param, function(res) {
					if(res.error != 0) {
						Toast(res.data.message);
						return;
					}
					Toast({
						message: '成功加入购物车！',
						iconClass: 'mint-toast-icon mintui mintui-success',
						duration: 1000
					});
					_this._hideDialog()
				})
			}

		},

	}
</script>

<style scoped lang="scss">
	.modal-dialog {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
		.modal-content {
			width: calc(100% - 60px);
			margin: 0 30px;
			background-color: #fff;
			border-radius: 8px;
			.modal-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 20px 40px;
				.title {
					line-height: 56px;
					font-size: 40px;
					color: #4A4A4A;
				}
				.modal-cancel-btn {
					color: #ef364e;
					font-size: 32px;
				}
			}
			.modal-body {
				padding: 0 20px;
				max-height: 800px;
				overflow-y: auto;
				.goods-intro-container {
					display: flex;
					justify-content: space-between;
					padding-top: 40px;
					margin-bottom: 60px;
					border-top: 1px solid #dcdcdc;
					.goods-synopsis {
						display: flex;
						flex-direction: column;
						width: 430px;
						.good-title {
							overflow: hidden;
							height: 50px;
							width: 430px;
							margin-bottom: 5px;
							line-height: 50px;
							text-overflow: ellipsis;
							white-space: nowrap;
							color: #4A4A4A;
							font-size: 36px;
						}
						.sub-goods-title {
							margin-bottom: 30px;
							font-size: 28px;
							color: #9b9b9b;
							line-height: 40px;
						}
						.goods-price {
							font-size: 36px;
						}
					}
					.goods-thumb-container {
						width: 170px;
						height: 144px;
						flex-shrink: 0;
						img {
							width: 100%;
							height: 100%;
						}
					}
				}
				.goods-specification {
					display: flex;
					flex-wrap: wrap;
					padding-bottom: 40px;
					.goods-active {
						background-color: #F8F8F8;
					}
					span {
						padding: 20px 30px;
						margin-right: 20px;
						margin-bottom: 20px;
						border: 2px solid #e6e6e6;
						border-radius: 8px;
						color: #67666b;
						font-size: 28px;
					}
				}
				.select-quantity {
					display: flex;
					align-items: center;
					padding-bottom: 60px;
					border-bottom: 2px solid #DCDCDC;
					.select-num-btn {
						width: 100px;
						height: 60px;
					}
					.selected-num {
						min-width: 30px;
						padding: 0 30px;
						text-align: center;
						font-size: 36px;
						color: #000;
					}
				}
			}
			.modal-footer {
				padding: 40px 20px;
				display: flex;
				justify-content: space-between;
				.add-cart {
					width: 280px;
					height: 90px;
					line-height: 90px;
					border-radius: 8px;
					background-color: #f8f8f8;
					text-align: center;
					font-size: 28px;
					color: #67666B;
				}
				.go-buy {
					width: 280px;
					height: 90px;
					line-height: 90px;
					border-radius: 8px;
					background: linear-gradient(-180deg, #F64565 0%, #EF364E 100%);
					box-shadow: 0 10px 10px 0 rgba(244, 63, 92, 0.15);
					color: #fff;
					font-size: 30px;
					text-align: center;
				}
			}
		}
	}
	
	.flex-grow {
		flex-grow: 2;
	}
</style>